<template>
  <div class="page-search">
    <Lyl-Form v-bind="searchFormConfig" v-model="formData">
      <template #header>
        <h2 class="header">高级检索</h2>
      </template>
      <template #footer>
        <div class="handle-btns">
          <el-button :icon="Refresh" @click="handleResetClick">重置</el-button>
          <el-button type="primary" :icon="Search" @click="handleQueryClick"
            >搜索</el-button
          >
        </div>
      </template>
    </Lyl-Form>
  </div>
</template>

<script setup lang="ts">
import LylForm from '@/base-ui/form/src/form.vue'
import { Refresh, Search } from '@element-plus/icons-vue'
import { defineProps, ref, defineEmits } from 'vue'
const props = defineProps({
  searchFormConfig: {
    type: Object,
    required: true
  }
})

/**
 * formItem：将传递过来的props重新赋值
 * formOriginData：初始化的formData对象
 * formData：响应式的数据
 */
const formItems = props.searchFormConfig.formItems ?? []
const formOriginData: any = {}
for (const item of formItems) {
  formOriginData[item.field] = ''
}
const formData = ref(formOriginData)

const emit = defineEmits(['resetBtnClick', 'queryBtnClick'])
/**
 * handleResetClick：重置按钮的回调
 */
const handleResetClick = () => {
  for (const key in formOriginData) {
    formData.value[`${key}`] = formOriginData[key]
  }
  emit('resetBtnClick')
}

const handleQueryClick = () => {
  emit('queryBtnClick', formData.value)
}
</script>

<style scoped lang="less">
.page-search {
  background-color: #ffffff;
  padding-top: 20px;
  border-radius: 4px;
  .handle-btns {
    text-align: right;
    padding: 0 40px 20px 0;
  }
}
</style>
